<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#sector {

position: relative;

overflow: hidden;

width: 200px;

height: 100px;

margin: 150px auto;

background-color: #ddd;

border-top-left-radius: 100px;

border-top-right-radius: 100px;

}

#sector ul li {

list-style: none;

position: absolute;

width: 200px;

height: 100px;

right: 50%;

top: 0;

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

transform-origin: 100% 100%;

}

#sector .sector1 {

background-color: #fef4ac;

-webkit-transform: skew(54deg);

-moz-transform: skew(54deg);

-ms-transform: skew(54deg);

transform: skew(54deg);

}

#sector .sector2 {

background-color: #FCF6E6;

-webkit-transform: rotate(36deg) skew(54deg);

-moz-transform: rotate(36deg) skew(54deg);

-ms-transform: rotate(36deg) skew(54deg);

transform: rotate(36deg) skew(54deg);

}

#sector .sector3 {

background-color: #faf2cc;

-webkit-transform: rotate(72deg) skew(54deg);

-moz-transform: rotate(72deg) skew(54deg);

-ms-transform: rotate(72deg) skew(54deg);

transform: rotate(72deg) skew(54deg);

}

#sector .sector4 {

background-color: #f9f1e9;

-webkit-transform: rotate(108deg) skew(54deg);

-moz-transform: rotate(108deg) skew(54deg);

-ms-transform: rotate(108deg) skew(54deg);

transform: rotate(108deg) skew(54deg);

}

#sector .sector5 {

background-color: #f5e79e;

-webkit-transform: rotate(144deg) skew(54deg);

-moz-transform: rotate(144deg) skew(54deg);

-ms-transform: rotate(144deg) skew(54deg);

transform: rotate(144deg) skew(54deg);

}

#sector ul li p {

position: absolute;

top: 50px;

left: 150px;

-webkit-transform: skew(-54deg) rotate(-70deg);

-moz-transform: skew(-54deg) rotate(-70deg);

-ms-transform: skew(-54deg) rotate(-70deg);

transform: skew(-54deg) rotate(-70deg);

}

</style>

</head>

<body>

<div id="sector">

<ul>

<li class="sector1"><p>A</p></li>

<li class="sector2"><p>B</p></li>

<li class="sector3"><p>C</p></li>

<li class="sector4"><p>D</p></li>

<li class="sector5"><p>E</p></li>

</ul>

<a></a>

</div>

</body>

</html>